<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - pv.Label</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

pre
{
	border-left: solid 10px #ddd;
	padding-left: 1.5em;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}

		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
	<li><a href="../symbols/Array.html">Array</a></li>
	
	<li><a href="../symbols/Date.html">Date</a></li>
	
	<li><a href="../symbols/pv.html">pv</a></li>
	
	<li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
	
	<li><a href="../symbols/pv.Area.html">pv.Area</a></li>
	
	<li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
	
	<li><a href="../symbols/pv.Color.html">pv.Color</a></li>
	
	<li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
	
	<li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
	
	<li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
	
	<li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
	
	<li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
	
	<li><a href="../symbols/pv.Image.html">pv.Image</a></li>
	
	<li><a href="../symbols/pv.Label.html">pv.Label</a></li>
	
	<li><a href="../symbols/pv.Layout.grid.html">pv.Layout.grid</a></li>
	
	<li><a href="../symbols/pv.Layout.icicle.html">pv.Layout.icicle</a></li>
	
	<li><a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a></li>
	
	<li><a href="../symbols/pv.Layout.sunburst.html">pv.Layout.sunburst</a></li>
	
	<li><a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a></li>
	
	<li><a href="../symbols/pv.Line.html">pv.Line</a></li>
	
	<li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
	
	<li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
	
	<li><a href="../symbols/pv.ns.html">pv.ns</a></li>
	
	<li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
	
	<li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
	
	<li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
	
	<li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
	
	<li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
	
	<li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
	
	<li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
	
	<li><a href="../symbols/pv.version.html">pv.version</a></li>
	
	<li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Class pv.Label
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				<br />Extends
					<a href="../symbols/pv.Mark.html">pv.Mark</a>.<br />
				
			
				Represents a text label, allowing textual annotation of other marks or
arbitrary text within the visualization. The character data must be plain
text (unicode), though the text can be styled using the <a href="#font">#font</a>
property. If rich text is needed, external HTML elements can be overlaid on
the canvas by hand.

<p>Labels are positioned using the box model, similarly to Dot. Thus,
a label has no width or height, but merely a text anchor location. The text
is positioned relative to this anchor location based on the
<a href="#textAlign">#textAlign</a>, <a href="#textBaseline">#textBaseline</a> and <a href="#textMargin">#textMargin</a> properties.
Furthermore, the text may be rotated using <a href="#textAngle">#textAngle</a>.

<p>Labels ignore events, so as to not interfere with event handlers on
underlying marks, such as bars. In the future, we may support event handlers
on labels.

<p>See also the <a href="../../api/Label.html">Label guide</a>.
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/mark_Label.js.html">Label.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Label.">
				<caption>Class Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#constructor">pv.Label</a></b>()
							</div>
							<div class="description">Constructs a new label mark with default properties.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Label.">
					<caption>Field Summary</caption>
					<thead>
						<tr>
							<th scope="col">Field Attributes</th>
							<th scope="col">Field Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#defaults">defaults</a></b>
								</div>
								<div class="description">Default properties for labels.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#font">font</a></b>
								</div>
								<div class="description">The font format, per the CSS Level 2 specification.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#text">text</a></b>
								</div>
								<div class="description">The character data to render; a string.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#textAlign">textAlign</a></b>
								</div>
								<div class="description">The horizontal text alignment.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#textAngle">textAngle</a></b>
								</div>
								<div class="description">The rotation angle, in radians.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#textBaseline">textBaseline</a></b>
								</div>
								<div class="description">The vertical text alignment.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#textMargin">textMargin</a></b>
								</div>
								<div class="description">The text margin; may be specified in pixels, or in font-dependent units (such
as ".1ex").</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#textShadow">textShadow</a></b>
								</div>
								<div class="description">A list of shadow effects to be applied to text, per the CSS Text Level 3
text-shadow property.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Label.html#textStyle">textStyle</a></b>
								</div>
								<div class="description">The text color.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Fields borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#bottom">bottom</a>, <a href="../symbols/pv.Mark.html#childIndex">childIndex</a>, <a href="../symbols/pv.Mark.html#cursor">cursor</a>, <a href="../symbols/pv.Mark.html#data">data</a>, <a href="../symbols/pv.Mark.html#index">index</a>, <a href="../symbols/pv.Mark.html#left">left</a>, <a href="../symbols/pv.Mark.html#parent">parent</a>, <a href="../symbols/pv.Mark.html#proto">proto</a>, <a href="../symbols/pv.Mark.html#reverse">reverse</a>, <a href="../symbols/pv.Mark.html#right">right</a>, <a href="../symbols/pv.Mark.html#root">root</a>, <a href="../symbols/pv.Mark.html#scene">scene</a>, <a href="../symbols/pv.Mark.html#title">title</a>, <a href="../symbols/pv.Mark.html#top">top</a>, <a href="../symbols/pv.Mark.html#type">type</a>, <a href="../symbols/pv.Mark.html#visible">visible</a></dd>
				</dl>
				
			

<!-- ============================== methods summary ======================== -->
			
				
				
				
				
				<dl class="inheritsList">
				<dt>Methods borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#add">add</a>, <a href="../symbols/pv.Mark.html#anchor">anchor</a>, <a href="../symbols/pv.Mark.html#anchorTarget">anchorTarget</a>, <a href="../symbols/pv.Mark.html#cousin">cousin</a>, <a href="../symbols/pv.Mark.html#def">def</a>, <a href="../symbols/pv.Mark.html#event">event</a>, <a href="../symbols/pv.Mark.html#extend">extend</a>, <a href="../symbols/pv.Mark.html#first">first</a>, <a href="../symbols/pv.Mark.html#last">last</a>, <a href="../symbols/pv.Mark.html#mouse">mouse</a>, <a href="../symbols/pv.Mark.html#render">render</a>, <a href="../symbols/pv.Mark.html#sibling">sibling</a></dd>
				</dl>
				
			
<!-- ============================== events summary ======================== -->
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Class Detail
				</div>
				
				<div class="fixedFont">
						<b>pv.Label</b>()
				</div>
				
				<div class="description">
					Constructs a new label mark with default properties. Labels are not typically
constructed directly, but by adding to a panel or an existing mark via
<a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
					
				</div>
				
				
				
				
					
					
					
					
					
					
					

			</div>
			

<!-- ============================== field details ========================== -->		
			
				<div class="sectionTitle">
					Field Detail
				</div>
				
					<a name="defaults"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Label.html">pv.Label</a>}</span>
					<b>defaults</b>
					
					</div>
					<div class="description">
						Default properties for labels. See the individual properties for the default
values.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="font"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>font</b>
					
					</div>
					<div class="description">
						The font format, per the CSS Level 2 specification. The default font is "10px
sans-serif", for consistency with the HTML 5 canvas element specification.
Note that since text is not wrapped, any line-height property will be
ignored. The other font-style, font-variant, font-weight, font-size and
font-family properties are supported.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="http://www.w3.org/TR/CSS2/fonts.html#font-shorthand">CSS2 fonts</a></dd>
							
							</dl>
						
						

					<hr />
				
					<a name="text"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>text</b>
					
					</div>
					<div class="description">
						The character data to render; a string. The default value of the text
property is the identity function, meaning the label's associated datum will
be rendered using its <tt>toString</tt>.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="textAlign"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>textAlign</b>
					
					</div>
					<div class="description">
						The horizontal text alignment. One of:<ul>

<li>left
<li>center
<li>right

</ul>The default horizontal alignment is left.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="textAngle"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>textAngle</b>
					
					</div>
					<div class="description">
						The rotation angle, in radians. Text is rotated clockwise relative to the
anchor location. For example, with the default left alignment, an angle of
Math.PI / 2 causes text to proceed downwards. The default angle is zero.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="textBaseline"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>textBaseline</b>
					
					</div>
					<div class="description">
						The vertical text alignment. One of:<ul>

<li>top
<li>middle
<li>bottom

</ul>The default vertical alignment is bottom.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="textMargin"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>textMargin</b>
					
					</div>
					<div class="description">
						The text margin; may be specified in pixels, or in font-dependent units (such
as ".1ex"). The margin can be used to pad text away from its anchor location,
in a direction dependent on the horizontal and vertical alignment
properties. For example, if the text is left- and middle-aligned, the margin
shifts the text to the right. The default margin is 3 pixels.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="textShadow"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>textShadow</b>
					
					</div>
					<div class="description">
						A list of shadow effects to be applied to text, per the CSS Text Level 3
text-shadow property. An example specification is "0.1em 0.1em 0.1em
rgba(0,0,0,.5)"; the first length is the horizontal offset, the second the
vertical offset, and the third the blur radius.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="http://www.w3.org/TR/css3-text/#text-shadow">CSS3 text</a></dd>
							
							</dl>
						
						

					<hr />
				
					<a name="textStyle"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>textStyle</b>
					
					</div>
					<div class="description">
						The text color. The name "textStyle" is used for consistency with "fillStyle"
and "strokeStyle", although it might be better to rename this property (and
perhaps use the same name as "strokeStyle"). The default color is black.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
							
							</dl>
						
						

					
				
			

<!-- ============================== method details ========================= -->		
			
			
<!-- ============================== event details ========================= -->		
			
			
			<hr />
		</div>

		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.0 on Tue Oct 06 2009 09:59:02 GMT-0700 (PDT)
		</div>
	</body>
</html>
